<template>
	<view class="yz">
		<!-- 两个输入框 -->
		<view class="inputBox">
			<text class="cuIcon-people"></text>
			<input class="uni-input-input" type="text" placeholder="请输入手机号" maxlength="11" v-model="account" />
			<text class="cuIcon-people" style="visibility: hidden;"></text>
		</view>
		<view class="inputBox">
			<text class="cuIcon-lock"></text>
			<!-- BUG 加上这个uni-input-input类名 不然样式炸 -->
			<input class="uni-input-input" :type="init.HidePwd ? 'password' : 'text'" placeholder="输入8-16位数字与字母组合的密码" maxlength="16" v-model="pwd" />
			<text class="cuIcon-attention" @click="ShowHidePwd"></text>
		</view>
		<view class="inputBox">
			<text class="cuIcon-emoji"></text>
			<input class="uni-input-input" type="text" placeholder="请填写手机验证码" v-model="verCode" />
			<text class="cuIcon-aaaaa VerCode fo-blue" @click="GetVerCode">{{ init.VerCodeTxt }}</text>
		</view>
		<!-- 登录按钮 -->
		<button class="cu-btn fo-white" style="background-color: #34cef8;" @click="onRegister">注册</button>
	</view>
</template>

<script>
import { API$register,API$getSMSInterface } from '../../../../common/API/other.js';
// MD5加密
import MD5 from '@/common/Tools/md5.js'
export default {
	name: '',
	data() {
		return {
			init: {
				HidePwd: true, // 显示与隐藏密码
				VerCodeTxt: '获取验证码', // 验证码文字/倒计时
				isClickVerCodeTxt: false // 是否点击了验证码进行倒计时
			},
			account: '',
			pwd: '',
			verCode:""
		};
	},
	async mounted() {
		
	},
	methods: {
		// 显示或隐藏密码
		ShowHidePwd() {
			this.init.HidePwd = !this.init.HidePwd;
		},
		// 验证码倒计时
		VerCodeCountDown() {
			let count = 60;
			let timer = setInterval(() => {
				this.init.VerCodeTxt = --count;
				if (count === Number(-1)) {
					clearInterval(timer);
					this.init.VerCodeTxt = '重新获取';
					this.init.isClickVerCodeTxt = false;
					return;
				}
			}, 1000);
		},
		// 获取手机验证码
		async GetVerCode() {
			// 校验格式
			if (!this.$verify.PhoneFormat(this.account)) {
				return uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '手机号码格式错误'
				});
			}
			// 倒计时状态下不执行
			if (this.init.isClickVerCodeTxt) return;
			this.init.VerCodeTxt = '60';
			this.init.isClickVerCodeTxt = true;
			this.VerCodeCountDown();
			let {code,msg} = await API$getSMSInterface({SMSType:"register",account:this.account})
			if(code===200){
				console.log(code,msg)
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '验证码已经发送'
				});
			}
			
		},
		// 注册参数校验
		rules(){
			if (!this.$verify.PhoneFormat(this.account)) { // 手机格式错误
				return '手机格式错误'
			}
			if (!this.$verify.pwdFormat(this.pwd)) { // 密码格式错误
				return '密码格式错误'
			}
			if (!this.$verify.verCodeFormat_6(this.verCode)) { // 密码格式错误
				return '验证码格式错误'
			}
			return 'ok'
		},
		/**************************数据相关写*****************************************/
		async onRegister() {
			if(this.rules()!='ok'){
				return this.$pub.Toast(this.rules())
			}
			uni.showLoading({
				title: '注册中',
				mask: true
			});
			let {code,msg,data} = await API$register({
				account: this.account,
				pwd: this.pwd,
				verCode:this.verCode
			});
			
			if(code===204) return this.$pub.Toast(msg)
			if(code==200){
				// 注册环信   （这边懒得写了  注册环信这一块应该是放在后端执行的  安全  洋盘和环信其一注册失败还可以回滚）
				let {msg} = await this.$HuanxinIM.Register({
					user:data._id  ,// 这边是用洋盘用户的唯一标识_id
					pwd:MD5(data.pwd)
				})
				// 注册成功~
				if(msg==='ok'){
					console.log('IM注册成功~')
				}else{
					this.$pub.Toast('IM注册失败~')
				}
				
				uni.showLoading({
					title: '恭喜您，注册成功~',
					mask: true
				});
				setTimeout(()=>{
					uni.hideLoading();
					uni.navigateBack()
				},1000)
				// this.$pub.redirTo(`pages/other/login?asscount=${this.account}&pwd=${this.pwd}`)
			}
		}
	}
};
</script>

<style lang="less" scoped>
.yz {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 500rpx;
	justify-content: space-around;
}
.inputBox {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	padding: 30rpx 20rpx;
	/* #ifdef APP-PLUS */
	padding: 30rpx 20rpx 26rpx;
	/* #endif */
	background-color: #f6f6f6;
	border-radius: 50px;
	font-size: 28rpx;
	width: 600rpx;
	input {
		background-color: #f6f6f6 !important;
		width: inherit;
		outline: none;
		border: none;
		text-align: left;
	}
	[class^='cuIcon-'] {
		padding: 0 20rpx;
	}
	//验证码样式
	.VerCode {
		text-align: right;
		width: 240px;
		font-size: 24rpx;
	}
}
.other {
	width: 600rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	box-sizing: border-box;
}
.cu-btn {
	width: 80%;
	height: 80rpx;
	border-radius: 40rpx;
}
</style>
